<template>
  <div class="page">

    <div class="page-ctx">
      <div class="page-inner w-1400">
        <div class="form-box">
          <div class="input-wrap">
            <div class="tab-box">
              <div class="tab-item">会员登录</div>
            </div>
            <div class="flex m-b-t-20">
              <div class="input-label">用户名：</div>
              <div class="input-box">
                <input
                  type="text"
                  placeholder="请输入用户名"
                  v-model="form.phone"
                />
              </div>
            </div>
            <div class="flex m-b-t-20">
              <div class="input-label">密码：</div>
              <div class="input-box">
                <!-- <span>密码</span> -->
                <input
                  type="password"
                  placeholder="请输入密码"
                  v-model="form.password"
                />
              </div>
            </div>
            <div class="flex m-b-t-20">
              <div class="input-label"></div>
              <div class="pass-act-box flex-between">
                <!-- <div class="reg-box">
                  <span> 没有账号， </span>
                  <router-link to="/register">立即注册</router-link>
                </div> -->
                <span class="save">
                  <el-checkbox v-model="savePass">记住密码</el-checkbox>
                </span>
                <router-link to="retrieve" class="forget">忘记密码</router-link>
              </div>
            </div>

            <div class="flex m-b-t-20">
              <div class="input-label"></div>
              <div class="btn-box">
                <button class="btn-ripple" @click="do_submit()">登录</button>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>

    <terms_modal ref="terms_modal" />
  </div>
</template>

<script>
import terms_modal from "@/components/account/terms_modal.vue"; //协议弹窗

import { mapState } from "vuex";

export default {
  name: "login",
  components: {
    terms_modal,
  },
  data() {
    return {
      is_agree: true,

      mode: "账号密码", //微信扫码
      tabType: "PASS", //登录方式
      agreed: false,
      savePass: true, //记住密码

      form: {
        loginType: "0", //登录方式：1-手机验证码登录 0-手机密码登录
        phone: "",
        password: "",
        code: "",
      },
    };
  },
  computed: {
    // ...mapState([""]),
  },
  created() {
    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
  },
  methods: {
    terms_open(id) {
      this.$refs.terms_modal.init(id);
    },

    do_submit() {
      let reg_phone = /^1[3-9]\d{9}$/;
      // let reg_email = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;

      // if (!this.is_agree) {
      //   alertErr("请阅读并勾选协议条款");
      //   return;
      // }
      // if (!reg_phone.test(this.form.phone)) {
      //   alertErr("请输入正确的手机号");
      //   return;
      // }
      if (!this.form.password) {
        alertErr("请输入密码");
        return;
      }

      this.$httpApi("/login", {
        username: this.form.phone,
        password: this.form.password,
            },
             "post"
          ).then(res=>{
               console.log(res,'dedede')
               if(res.code==200) {
                // 登录成功
                
                localStorage.setItem("token", res.token);
                this.$httpApi("/getInfo",{},'get').then(user_res=>{
                  console.log(user_res,'getInfo')
                  localStorage.setItem("userInfo", user_res.user);
                  this.$store.commit("set_vuex_user", {token: res.token, user: user_res.user});
                  if(user_res.user.userType == '01') {
                    this.$router.push("/my-index");
                  }else {
                    this.$router.push("/business-index");
                  }
                  
                })
                
               }else {
                alertErr(res.msg)
               }
          }).catch(err=>{
            console.log(err,'err')
            alertErr(err.msg)
          })

      // this.$api({
      //   url: "/service.php",
      //   method: "get",
      //   data: {
      //     action: "login_phoneLogin",
      //     ...this.form,
      //   },
      // }).then((res) => {
      //   alert(res);
      //   if (res.code == 200) {
      //     this.$store.commit("set_vuex_user", res.data);
      //     this.$store.dispatch("query_user_auth_info");
      //     this.$router.push("/order-list");
      //   } else {
      //   }
      // });
    },
  },
};
</script>

<style scoped lang="less">
.input-label{
  width: 100px;
  height: 22px;
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 16px;
  color: #7D7D7D;
  line-height: 24px;
  margin-right: 16px;
  text-align: right;
}
.m-b-t-20{
  margin-bottom: 20px;
}
.page {
  position: relative;
  background: #F5F5F5;


  .page-ctx {
    

    display: flex;
    align-items: center;
  }

  .page-poster {
    margin-left: 46px;
    img {
      width: 664px;
      height: 664px;
    }
  }

  .page-inner {
    height: auto;
    margin: 0 auto;
    background: transparent;
    align-items: center;
    position: relative;
    display: flex;
    justify-content: center;


    .form-box {
      position: relative;
      width: fit-content;
      border-radius: 10px;
      margin-top: 92px;
      margin-bottom: 158px;
    }

    .input-wrap {
      width: 680px;
      margin: 0 auto;

      .tab-box {
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        align-items: center;

        .tab-item {
          font-weight: 400;
          font-size: 32px;
          color: #333333;
          line-height: 48px;
          border-bottom: 2px solid #EF1F1F;

          &:first-child {
            // &:after {
            //   content: "";
            //   display: inline-block;
            //   width: 2px;
            //   height: 24px;
            //   background-color: #ccc;
            //   margin: 0 30px;
            //   position: relative;
            //   top: 3px;
            // }
          }

          &.active {
            color: #333333;
          }
        }
      }

      .input-box {
        // margin-bottom: 20px;
        width: 100%;
        height: 44px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;

        span {
          display: inline-block;
          width: 95px;

          border-right: 1px solid #ccc;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 14px;
          color: #7d7d7d;
          text-indent: 1em;
        }

        .icon-box {
          justify-content: flex-end;
          width: 32px;
          height: 50px;
          .icon-phone {
            width: 15.63px;
          }
          .icon-pass {
            width: 17.49px;
          }
        }

        input {
          flex: 2;
          height: 100%;
          padding-left: 10px;
          font-size: 14px;
          color: #000;

          &::-webkit-input-placeholder {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #d7d7d7;
          }
        }
      }

      .btn-box {
        button {
          width: 400px;
          height: 44px;
          background: #EF1F1F;
          border-radius: 4px 4px 4px 4px;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .pass-act-box {
        flex:2;

        span {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666;
        }
        a {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #EF1F1F;;
        }
        .forget{
          color: #9B9B9B;
        }
      }

      .register-box {
        text-align: center;
        margin-top: 20px;
        text-align: cetner;
        font-size: 14px;

        a {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 24px;
          color: #EF1F1F;;
          border-bottom: 1px solid #EF1F1F;;
        }
      }
    }
  }
}

.terms-box {
  position: absolute;
  height: 40px;
  background: #f5f6f8;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  padding-left: 20px;
  text-align: center;

  .terms-check {
    cursor: pointer;
    font-family: OPPOSans, OPPOSans;
    font-weight: 400;
    font-size: 12px;
    color: #999999;

    img {
      margin-right: 10px;
      width: 18px;
      height: 18px;
    }
  }

  .terms-text {
    cursor: pointer;
    font-family: OPPOSans, OPPOSans;
    font-weight: 400;
    font-size: 12px;
    color: #999999;

    &:hover {
      color: #009F39;
    }
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/page/login.less"></style>
